<template>
  <view class="divnation-order-detail-container">
    <e-navbar leftTitle="订单详情"></e-navbar>
    <u-gap height="15"></u-gap>
    <view class="main-card p-30">
      <view class="flex col-center row-between">
        <view class="font-28 pingfang-heavy">{{ orderDetail.question }}</view>
        <view class="font-28 pingfang-heavy flex col-bottom" style="color: #E73100" v-if="orderDetail.pay_way == 'wechat'">
          <view class="font-24">￥</view>
          <view class="font-38 text-bold" style="line-height: 40rpx;">{{ orderDetail.pay_money }}</view>
        </view>
        <view class="font-28 pingfang-heavy flex col-bottom" style="color: #E73100" v-else>
          <view class="font-38 text-bold" style="line-height: 40rpx;">{{ orderDetail.pay_coin }}</view>
          <view class="font-24">易币</view>
        </view>
      </view>
      <view class="flex col-center row-between text-999 font-24 m-t-12">
        <text>下单时间:{{$u.timeFormat(orderDetail.create_time, 'yyyy-mm-dd hh:MM:ss')}}</text>
        <text>{{ orderDetail.pay_way == "wechat" ? "支付金额" : "支付易币" }}</text>
      </view>
    </view>
    <view class="main-card p-30 m-t-20" v-if="orderDetail.type == 'liunian'">
      <view class="font-28 pingfang-heavy">占卜问题</view>
      <view class="order-detail-content m-b-30 m-t-30">
        {{ orderDetail.question }}
      </view>
      <view class="font-28 pingfang-heavy">占卜结果</view>
      <view class="order-detail-content m-b-30 m-t-30">
        {{ orderDetail.answer }}
      </view>
    </view>
    <view class="main-card order-info p-30 m-t-20">
      <view class="order-info_item">
        <view class="label">订单编号</view>
        <view class="value">{{ orderDetail.order_sn || '--' }}</view>
      </view>
      <view class="order-info_item">
        <view class="label">支付方式</view>
        <view class="value">{{ orderDetail.pay_way == "wechat" ? "微信支付" : "易币支付" }}</view>
      </view>
      <view class="order-info_item">
        <view class="label">下单时间</view>
        <view class="value">{{$u.timeFormat(orderDetail.create_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
      </view>
      <view class="order-info_item" v-if="orderDetail.pay_time">
        <view class="label">支付时间</view>
        <view class="value">{{$u.timeFormat(orderDetail.pay_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
      </view>
    </view>
    <u-gap height="30"></u-gap>
    <!-- 未支付才显示 -->
    <view class="btn-row flex-between p-30" v-if="orderDetail.status == 1">
      <view>
        <u-button text="取消订单" type="info" @click="handleCancelOrder"></u-button>
      </view>
      <view class="m-l-30">
        <u-button text="支付" type="primary" @click="handlePayOrder"></u-button>
      </view>
    </view>
    <u-gap height="30"></u-gap>
  </view>
</template>

<script>
import {wxPay} from "@/common/pay";

export default {
  data() {
    return {
      orderDetail: {},
      orderId: null, //订单id
    };
  },
  onLoad(options) {
    if(options.id){
      this.orderId = options.id;
      this.getOrderDetail(options.id);
    }
  },
  methods: {
    // 订单详情
    async getOrderDetail(order_id){
      const res = await this.$api.order_info({ order_id });
      if (res.code == 1) {
        this.orderDetail = res.data;
      }
    },
    // 取消订单
    handleCancelOrder(){
      uni.showModal({
        title: "提示",
        content: "确定取消订单?",
        success: async res => {
          if(res.confirm){
            const result = await this.$api.cancel_order({ order_id: this.orderDetail.id });
            if(result.code === 1) {
              uni.showToast({
                title: "取消成功",
                icon: "success",
              })
              this.getOrderDetail(this.orderId);
            }
          }
        }
      })
    },
    // 确认支付订单
    async handlePayOrder(){
      const res = await this.$api.create_payment({
        order_id: this.orderDetail.id,
      });
      if(res.code == 1){
        wxPay(res.data, result=>{
          if(result.code == 1){
            // 如果是充值订单
            if(this.orderDetail.type !== "recharge"){
              uni.navigateTo({
                url: "/pagesAugur/result/result"
              })
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .divnation-order-detail-container{
    .order-detail-content{
      padding: 30rpx;
      background: #F5F6FA;
      border-radius: 20rpx;
      font-size: 28rpx;
      line-height: 48rpx;
    }
    .order-info{
      &_item:not(:last-child){
        margin-bottom: 24rpx;
      }
      &_item{
        font-size: 26rpx;
        display: flex;
        align-items: center;
        .value{
          color: #666;
          margin-left: 20rpx;
        }
      }
    }
    .btn-row{
      >view{
        width: calc(100% / 2);
      }
    }
  }
</style>
